<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>安装向导</title>
  <!-- import CSS -->
  <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="/element-ui/lib/theme-chalk/result.css">
  <link rel="stylesheet" href="/admin/css/common.css">
</head>
<body>
  <div id="app">
    
    {if $isinstall==0}
    <el-row type="flex" justify="center">
      <el-col :sm="12" :lg="6">
        <el-result icon="error" title="该项目已经安装了，如需重新安装请删除根目录下面的.ohyueo文件" subTitle="该项目已经安装了，如需重新安装请删除根目录下面的.ohyueo文件">
        </el-result>
      </el-col>
    </el-row>
    {else}
    <el-row>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="16" :offset="4">
        <div class="tip">
          <p>
            1. 先填写数据库链接信息，和项目信息，<span style="font-size: 13px;color: red;">注意数据库不能没有，里面也不能有数据，只能是空的数据库</span><br/>
            2. 生成项目代码<br/>
            3. 安装完成<br/>
          </p>
        </div>
        <el-steps :active="active" align-center>
          <el-step title="步骤1" description="填写信息"></el-step>
          <el-step title="步骤2" description="生成代码"></el-step>
          <el-step title="步骤3" description="安装完成"></el-step>
        </el-steps>

        <el-col v-if="active!=3" :span="14" :offset="6">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm u-margin-top-30">
          <el-form-item label="数据库">
            <el-col :span="6">
              <el-form-item prop="dbuser">
                <el-input v-model="ruleForm.dbuser" placeholder="数据库用户名"></el-input>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="6">
              <el-form-item prop="dbpass">
                <el-input v-model="ruleForm.dbpass" placeholder="数据库密码"></el-input>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="6">
              <el-form-item prop="dbname">
                <el-input v-model="ruleForm.proname" placeholder="数据库名称" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="项目名称" prop="proname">
            <el-input v-model="ruleForm.proname" placeholder="项目名称，英文格式，如商城：mall"></el-input>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>

      <el-col v-if="active==3" :span="14" :offset="6">
        <el-result icon="success" title="安装成功" subTitle="安装成功，点击下面的按钮进入后台"></el-result>
        <div class="tip">
          <p>
            1. 后台登录地址：<a href="{$url}/admin/Login/index?key=ohyueo" target="_blank" style="color: #409EFF;text-decoration: none;" >{$url}/admin/Login/index?key=ohyueo</a><br/>
            2. 后台账号：admin<br/>
            3. 后台密码：123456<br/>
          </p>
        </div>
        <el-button type="primary" @click="openurl()">进入后台</el-button>
      </el-col>

      </el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    {/if}

  
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="/element-ui/lib/vue/vue.js"></script>
  <!-- import JavaScript -->
  <script src="/element-ui/lib/index.js"></script>
  <script src="/admin/js/jquery.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { 
            active: 1,
            ruleForm: {
              dbuser: `{$dbuser}`,
              dbname: '',
              dbpass: `{$dbpass}`,
              proname: '',
            },
            rules: {
              dbuser: [
                {  required: true, message: '请输入数据库用户名', trigger: 'blur' }
              ],
              dbpass: [
              {  required: true, message: '请输入数据库密码', trigger: 'blur' }
              ],
              proname: [
                { required: true, message: '请填写项目名称', trigger: 'blur' }
              ]
            }
        }
      },
      methods: {
        openurl(){
            window.location.href="/admin/Login/index?key=ohyueo";
        },
        next() {
          this.active++;
        },
        submitForm(formName) {
          var _this=this;
          this.$refs[formName].validate((valid) => {
            if (valid) {
                // 提交表单
                $.post(
                    "{:url('/install/index/install')}",
                    {"id":0,"dbuser":_this.ruleForm.dbuser,"dbpass":_this.ruleForm.dbpass,"dbname":_this.ruleForm.proname,"proname":_this.ruleForm.proname},
                    function(data,state){
                        if(state != "success"){
                          _this.$message.error('请求出错');
                        }else if(data.code == 1){
                          _this.active=3;
                          _this.$message.success(data.message);
                        }else{
                          _this.$message.error(data.message);
                        }
                    }
                );
            } else {
              this.$message.error('验证不通过，请检查表单');
              // this.$message({
              //   message: '验证不通过，请检查表单',
              //   type: 'warning'
              // });
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      }
    })
  </script>
</html>